import React from 'react'
import { Calendar, ClipboardList, BarChart3, CheckSquare, Wrench, Package, Settings } from 'lucide-react'
import './Sidebar.css'

const Sidebar = ({ activeTab, setActiveTab }) => {
  const menuItems = [
    { id: 'info-maintenance', label: '信息维护', icon: Settings },
    { id: 'experiment-planning', label: '试验计划排产', icon: Calendar },
    { id: 'daily-work-plan', label: '日工作计划安排', icon: ClipboardList },
    { id: 'experiment-statistics', label: '试验信息统计', icon: BarChart3 },
    { id: 'weekly-meeting-todos', label: '周会待办事项统计', icon: CheckSquare },
    { id: 'equipment-maintenance', label: '设备维护维保', icon: Wrench },
    { id: 'key-parts-inventory', label: '关键备件库存记录', icon: Package }
  ]

  return (
    <div className="sidebar">
      <div className="sidebar-header">
        <h1>试验部门管理系统</h1>
      </div>
      <nav className="sidebar-nav">
        {menuItems.map((item) => {
          const Icon = item.icon
          return (
            <div
              key={item.id}
              className={`sidebar-item ${activeTab === item.id ? 'active' : ''}`}
              onClick={() => setActiveTab(item.id)}
            >
              <Icon size={20} />
              <span>{item.label}</span>
            </div>
          )
        })}
      </nav>
    </div>
  )
}

export default Sidebar 